<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>「寻找校园宝藏干饭人」交互式策划案</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!-- Chosen Palette: Warm Neutrals & Subtle Accents -->
    <!-- Application Structure Plan: The SPA uses a top-down, dashboard-style layout. It starts with high-level goals (KPIs), then moves to the core 'How-To' (the process), followed by incentives (Prizes & Budget), and concludes with the operational plan (Timeline & Risks). This structure is chosen to mirror a typical decision-making process: 'What are we trying to achieve?' -> 'How will it work?' -> 'What's in it for participants and what will it cost?' -> 'How will we execute?'. This flow is more intuitive for stakeholders than the original report's linear structure, allowing for quick comprehension of the most critical information first. -->
    <!-- Visualization & Content Choices: 
        - Report Info: Key Goals (Member Growth, etc.) -> Goal: Inform -> Viz/Presentation: Dynamic Stat Cards -> Interaction: None, direct display -> Justification: Immediately highlights the core objectives and expected outcomes. -> Library/Method: HTML/Tailwind.
        - Report Info: Budget Breakdown -> Goal: Compare Proportions -> Viz/Presentation: Donut Chart -> Interaction: Hover for details on each spending category. -> Justification: Visually communicates the heavy investment in prizes, which is a key selling point of the plan. -> Library/Method: Chart.js (Canvas).
        - Report Info: Prize Tiers -> Goal: Compare & Inform -> Viz/Presentation: Tiered Card Layout -> Interaction: None, clear visual hierarchy -> Justification: Allows for easy comparison of rewards, motivating participation. -> Library/Method: HTML/Tailwind.
        - Report Info: Activity Flow -> Goal: Organize/Change -> Viz/Presentation: Interactive Timeline/Process Flow -> Interaction: Click to view details for each phase. -> Justification: Breaks down the multi-week plan into digestible, sequential steps, clarifying the execution strategy. -> Library/Method: HTML/Tailwind/JS.
        - Report Info: Risks -> Goal: Inform -> Viz/Presentation: Toggled content sections -> Interaction: Click to reveal mitigation strategies. -> Justification: Presents potential issues and solutions concisely without cluttering the main view. -> Library/Method: HTML/Tailwind/JS.
    -->
    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #fdfbf7;
            color: #4a4a4a;
        }
        .nav-active {
            color: #d97706; /* amber-600 */
            border-bottom: 2px solid #d97706;
            font-weight: 600;
        }
        .nav-item {
            cursor: pointer;
            transition: color 0.3s, border-color 0.3s;
            padding-bottom: 4px;
            border-bottom: 2px solid transparent;
        }
        .nav-item:hover {
            color: #f59e0b; /* amber-500 */
        }
        .content-section {
            display: none;
        }
        .content-section.active {
            display: block;
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .kpi-card {
            background-color: #fff;
            border: 1px solid #f3f4f6;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .kpi-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
        }
        .timeline-item.active .timeline-content {
            max-height: 500px;
            opacity: 1;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }
        .timeline-item.active .timeline-arrow {
            transform: rotate(180deg);
        }
        .timeline-content {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: all 0.5s ease-in-out;
        }
        .timeline-arrow {
            transition: transform 0.3s ease-in-out;
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 400px;
            margin-left: auto;
            margin-right: auto;
            height: auto;
            max-height: 400px;
        }
    </style>
</head>
<body class="antialiased">

    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        
        <!-- Header -->
        <header class="text-center mb-12">
            <h1 class="text-4xl md:text-5xl font-bold text-amber-700">「寻找校园宝藏干饭人」</h1>
            <p class="mt-4 text-lg text-gray-600">美团校园俱乐部迎新季活动 · 交互式策划案</p>
        </header>

        <!-- Navigation -->
        <nav class="sticky top-0 bg-fdfbf7/80 backdrop-blur-sm z-10 mb-12 border-b border-gray-200">
            <ul class="flex items-center justify-center space-x-4 sm:space-x-8 text-base md:text-lg text-gray-500 py-3">
                <li><a class="nav-item nav-active" data-target="overview">活动总览</a></li>
                <li><a class="nav-item" data-target="how-to">参与方式</a></li>
                <li><a class="nav-item" data-target="budget">经费与收益</a></li>
                <li><a class="nav-item" data-target="timeline">活动时间线</a></li>
            </ul>
        </nav>

        <!-- Main Content -->
        <main>
            <!-- Section: Overview -->
            <section id="overview" class="content-section active">
                <div class="text-center mb-12">
                     <h2 class="text-3xl font-bold text-gray-800">活动目标与核心指标</h2>
                     <p class="mt-2 text-gray-500 max-w-2xl mx-auto">本次活动旨在通过精准的线上互动，实现会员规模的快速扩张，并为社团长期发展沉淀用户和内容资产。</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 text-center">
                    <div class="kpi-card p-6 rounded-xl shadow-sm">
                        <div class="text-5xl font-bold text-amber-600">500+</div>
                        <div class="mt-2 text-lg font-semibold text-gray-700">新会员增长</div>
                        <p class="mt-1 text-sm text-gray-500">通过活动直接或间接招募目标</p>
                    </div>
                    <div class="kpi-card p-6 rounded-xl shadow-sm">
                        <div class="text-5xl font-bold text-amber-600">800+</div>
                        <div class="mt-2 text-lg font-semibold text-gray-700">社群引流</div>
                        <p class="mt-1 text-sm text-gray-500">官方QQ/微信群新增成员目标</p>
                    </div>
                    <div class="kpi-card p-6 rounded-xl shadow-sm">
                        <div class="text-5xl font-bold text-amber-600">2000+</div>
                        <div class="mt-2 text-lg font-semibold text-gray-700">线上曝光</div>
                        <p class="mt-1 text-sm text-gray-500">基于100人参与的理论曝光量</p>
                    </div>
                </div>
                 <div class="mt-12 bg-white p-8 rounded-xl shadow-sm border border-gray-100">
                    <h3 class="text-2xl font-bold text-center text-gray-800 mb-6">奖项设置概览</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                        <div class="border border-amber-100 bg-amber-50/50 p-6 rounded-lg text-center">
                            <div class="text-xl font-bold text-amber-700">品鉴大师</div>
                            <p class="text-sm text-gray-500 mb-2">(3-5名)</p>
                            <p class="font-semibold">评委团评选，注重内容质量</p>
                            <p class="text-xs mt-1">奖品：拍立得、大额外卖券等</p>
                        </div>
                        <div class="border border-blue-100 bg-blue-50/50 p-6 rounded-lg text-center">
                            <div class="text-xl font-bold text-blue-700">人气之星</div>
                            <p class="text-sm text-gray-500 mb-2">(3-5名)</p>
                            <p class="font-semibold">点赞评论数排名，注重热度</p>
                            <p class="text-xs mt-1">奖品：零食大礼包、定制周边</p>
                        </div>
                        <div class="border border-green-100 bg-green-50/50 p-6 rounded-lg text-center">
                            <div class="text-xl font-bold text-green-700">幸运干饭人</div>
                            <p class="text-sm text-gray-500 mb-2">(10-20名)</p>
                            <p class="font-semibold">阳光普照，所有参与者抽奖</p>
                            <p class="text-xs mt-1">奖品：定制小礼品、小额外卖券</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Section: How To Participate -->
            <section id="how-to" class="content-section">
                 <div class="text-center mb-12">
                     <h2 class="text-3xl font-bold text-gray-800">三步成为“校园宝藏干饭人”</h2>
                     <p class="mt-2 text-gray-500 max-w-2xl mx-auto">我们设计了极简的参与流程，让每一位新生都能轻松分享，快速融入活动。</p>
                </div>
                <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
                    <div class="flex flex-col items-center">
                        <div class="flex items-center justify-center w-20 h-20 rounded-full bg-amber-100 text-amber-600 text-3xl font-bold mb-4">1</div>
                        <h3 class="text-xl font-semibold mb-2">拍照分享</h3>
                        <p class="text-gray-600">拍摄你的校园三餐，无论是食堂美食、外卖还是周边探店，图文或短视频均可。</p>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="flex items-center justify-center w-20 h-20 rounded-full bg-amber-100 text-amber-600 text-3xl font-bold mb-4">2</div>
                        <h3 class="text-xl font-semibold mb-2">发布内容</h3>
                        <p class="text-gray-600">在朋友圈或小红书发布，需包含对餐品的<span class="font-semibold">评价</span>、<span class="font-semibold">价格</span>等描述，并<span class="font-semibold">@俱乐部官方账号</span>或核心成员。</p>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="flex items-center justify-center w-20 h-20 rounded-full bg-amber-100 text-amber-600 text-3xl font-bold mb-4">3</div>
                        <h3 class="text-xl font-semibold mb-2">入群登记</h3>
                        <p class="text-gray-600">将发布截图发送至活动群或私信小助手，即可成功参与，获取抽奖资格。</p>
                    </div>
                </div>
            </section>

            <!-- Section: Budget & ROI -->
            <section id="budget" class="content-section">
                <div class="text-center mb-12">
                     <h2 class="text-3xl font-bold text-gray-800">经费预算与价值回报</h2>
                     <p class="mt-2 text-gray-500 max-w-2xl mx-auto">每一笔投入都旨在最大化活动吸引力与回报率，核心预算集中于奖励参与者。</p>
                </div>
                <div class="flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-16">
                    <div class="w-full lg:w-1/2">
                        <div class="chart-container">
                            <canvas id="budgetChart"></canvas>
                        </div>
                    </div>
                    <div class="w-full lg:w-1/2 max-w-md">
                        <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
                            <h3 class="text-xl font-bold text-center mb-4">预算详情 (总计: 2800元)</h3>
                            <ul class="space-y-3 text-gray-700">
                                <li class="flex justify-between items-center">
                                    <span><span class="inline-block w-3 h-3 rounded-full bg-amber-500 mr-2"></span>品鉴大师奖</span>
                                    <span class="font-semibold">900元</span>
                                </li>
                                <li class="flex justify-between items-center">
                                    <span><span class="inline-block w-3 h-3 rounded-full bg-sky-500 mr-2"></span>人气之星奖</span>
                                    <span class="font-semibold">500元</span>
                                </li>
                                <li class="flex justify-between items-center">
                                    <span><span class="inline-block w-3 h-3 rounded-full bg-emerald-500 mr-2"></span>幸运干饭人奖</span>
                                    <span class="font-semibold">600元</span>
                                </li>
                                <li class="flex justify-between items-center">
                                    <span><span class="inline-block w-3 h-3 rounded-full bg-slate-500 mr-2"></span>宣传物料</span>
                                    <span class="font-semibold">500元</span>
                                </li>
                                <li class="flex justify-between items-center">
                                    <span><span class="inline-block w-3 h-3 rounded-full bg-gray-300 mr-2"></span>应急预备金</span>
                                    <span class="font-semibold">300元</span>
                                </li>
                            </ul>
                            <p class="text-xs text-center mt-4 text-gray-500">提示：可积极寻求商家赞助以降低现金成本。</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Section: Timeline -->
            <section id="timeline" class="content-section">
                <div class="text-center mb-12">
                     <h2 class="text-3xl font-bold text-gray-800">活动推进时间表</h2>
                     <p class="mt-2 text-gray-500 max-w-2xl mx-auto">活动将分为四个阶段有序进行，环环相扣，确保热度持续并最终实现会员转化。</p>
                </div>
                <div class="max-w-3xl mx-auto">
                    <div class="space-y-4">
                        <!-- Timeline Item 1 -->
                        <div class="timeline-item bg-white p-4 rounded-lg shadow-sm border border-gray-100 cursor-pointer">
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center font-bold text-gray-600 mr-4">1</div>
                                    <div>
                                        <h4 class="font-bold text-lg text-gray-800">预热期</h4>
                                        <p class="text-sm text-gray-500">军训开始前 3-5 天</p>
                                    </div>
                                </div>
                                <span class="timeline-arrow text-amber-600 text-2xl">&#9662;</span>
                            </div>
                            <div class="timeline-content pl-14 text-gray-600">
                                <p><strong>核心任务：</strong>制造悬念，初步引流。</p>
                                <ul class="list-disc list-inside mt-2 space-y-1 text-sm">
                                    <li>发布活动预告海报和推文。</li>
                                    <li>在各大新生群进行第一波宣传。</li>
                                    <li>建立活动核心QQ/微信群。</li>
                                </ul>
                            </div>
                        </div>
                        <!-- Timeline Item 2 -->
                        <div class="timeline-item bg-white p-4 rounded-lg shadow-sm border border-gray-100 cursor-pointer">
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center font-bold text-gray-600 mr-4">2</div>
                                    <div>
                                        <h4 class="font-bold text-lg text-gray-800">爆发期</h4>
                                        <p class="text-sm text-gray-500">军训第一周</p>
                                    </div>
                                </div>
                                <span class="timeline-arrow text-amber-600 text-2xl">&#9662;</span>
                            </div>
                             <div class="timeline-content pl-14 text-gray-600">
                                <p><strong>核心任务：</strong>活动全面启动，最大化曝光。</p>
                                <ul class="list-disc list-inside mt-2 space-y-1 text-sm">
                                    <li>线上通过校园墙、KOL集中宣发。</li>
                                    <li>线下在食堂、宿舍、军训场地派发传单和张贴海报。</li>
                                    <li>引导参与者按规则发布内容并入群。</li>
                                </ul>
                            </div>
                        </div>
                        <!-- Timeline Item 3 -->
                        <div class="timeline-item bg-white p-4 rounded-lg shadow-sm border border-gray-100 cursor-pointer">
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center font-bold text-gray-600 mr-4">3</div>
                                    <div>
                                        <h4 class="font-bold text-lg text-gray-800">持续期</h4>
                                        <p class="text-sm text-gray-500">军训第二周</p>
                                    </div>
                                </div>
                                <span class="timeline-arrow text-amber-600 text-2xl">&#9662;</span>
                            </div>
                             <div class="timeline-content pl-14 text-gray-600">
                                <p><strong>核心任务：</strong>维持热度，鼓励互动。</p>
                                <ul class="list-disc list-inside mt-2 space-y-1 text-sm">
                                    <li>每日在社群和官方账号播报优质投稿。</li>
                                    <li>公布实时人气榜单，激发竞争。</li>
                                    <li>进行中期抽奖，活跃社群气氛。</li>
                                </ul>
                            </div>
                        </div>
                        <!-- Timeline Item 4 -->
                        <div class="timeline-item bg-white p-4 rounded-lg shadow-sm border border-gray-100 cursor-pointer">
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center font-bold text-gray-600 mr-4">4</div>
                                    <div>
                                        <h4 class="font-bold text-lg text-gray-800">收尾与转化期</h4>
                                        <p class="text-sm text-gray-500">军训结束后</p>
                                    </div>
                                </div>
                                <span class="timeline-arrow text-amber-600 text-2xl">&#9662;</span>
                            </div>
                             <div class="timeline-content pl-14 text-gray-600">
                                <p><strong>核心任务：</strong>公布结果，完成会员转化。</p>
                                <ul class="list-disc list-inside mt-2 space-y-1 text-sm">
                                    <li>公布最终获奖名单，进行公示。</li>
                                    <li>举办线上或小型线下颁奖仪式。</li>
                                    <li>在社群内进行正式的招新宣讲，引导入会。</li>
                                    <li>发布活动总结推文，沉淀《新生美食宝典》。</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>

    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const navLinks = document.querySelectorAll('.nav-item');
            const contentSections = document.querySelectorAll('.content-section');

            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    navLinks.forEach(nav => nav.classList.remove('nav-active'));
                    this.classList.add('nav-active');

                    const targetId = this.getAttribute('data-target');
                    
                    contentSections.forEach(section => {
                        if (section.id === targetId) {
                            section.classList.add('active');
                        } else {
                            section.classList.remove('active');
                        }
                    });
                     window.scrollTo({ top: 0, behavior: 'smooth' });
                });
            });

            const timelineItems = document.querySelectorAll('.timeline-item');
            timelineItems.forEach(item => {
                item.addEventListener('click', function() {
                    const wasActive = this.classList.contains('active');
                    timelineItems.forEach(i => i.classList.remove('active'));
                    if (!wasActive) {
                        this.classList.add('active');
                    }
                });
            });

            const budgetData = {
                labels: ['品鉴大师奖', '人气之星奖', '幸运干饭人奖', '宣传物料', '应急预备金'],
                datasets: [{
                    label: '经费预算',
                    data: [900, 500, 600, 500, 300],
                    backgroundColor: [
                        '#f59e0b', // amber-500
                        '#0ea5e9', // sky-500
                        '#10b981', // emerald-500
                        '#64748b', // slate-500
                        '#d1d5db', // gray-300
                    ],
                    borderColor: '#fdfbf7',
                    borderWidth: 4,
                    hoverOffset: 8
                }]
            };

            const budgetConfig = {
                type: 'doughnut',
                data: budgetData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.parsed !== null) {
                                        label += new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(context.parsed);
                                    }
                                    return label;
                                }
                            }
                        }
                    },
                    cutout: '60%',
                }
            };
            
            const budgetChartCtx = document.getElementById('budgetChart').getContext('2d');
            if(budgetChartCtx) {
                 new Chart(budgetChartCtx, budgetConfig);
            }
        });
    </script>

</body>
</html>
